<template>
    <div id="bc">
        <el-form class="login-container" :model="loginForm" :rules="rules" ref="formRef" label-position="left" label-width="0px">
            <h1 class="title">登录</h1>

            <el-form-item prop="adminName">
                <el-input type="text" placeholder="用户账号" v-model="loginForm.adminName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input type="password" placeholder="用户密码" v-model="loginForm.password" show-password autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="doLogin" style="width: 100%" :loading="loading"> 登录 </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { postLoginAPI } from "@/api/user";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";

const router = useRouter();
const userStore = useUserStore();
// 表单数据
const loginForm = reactive({
    adminName: "一级管理员",
    password: "admin132",
});

// 表单引用
const formRef = ref<InstanceType<typeof import("element-plus/es")["ElForm"]>>();

// 加载状态
const loading = ref(false);

// 表单验证规则
const rules = reactive({
    adminName: [{ required: true, message: "请输入用户账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入用户密码", trigger: "blur" }],
});

// 登录
const doLogin = async () => {
    try {
        // 触发表单验证
        const valid = await formRef.value?.validate();
        if (!valid) return;

        loading.value = true;

        //调用登录接口：
        const res = await postLoginAPI(loginForm);
        console.log(res.admin, res.token);

        if (res.message === "登录成功") {
            // 登录成功提示
            ElMessage({
                message: res.message,
                type: "success",
            });

            // 存储管理员信息和 token
            userStore.setUser({
                adminId: res.admin.adminId,
                adminName: res.admin.adminName,
                password: res.admin.password,
                token: res.token,
            });
            // console.log(userStore.user);
            setTimeout(() => {
                router.push("/home");
            }, 500);
        }
    } catch (error) {
        ElMessage({
            message: "登录失败，管理员账号或密码错误",
            type: "error",
        });
    } finally {
        // 隐藏加载状态
        loading.value = false;
    }
};
</script>

<style lang="scss" scoped>
#bc {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-size: cover;
}

.login-container {
    width: 400px;
    padding: 30px 35px 15px 35px;
    text-align: center;
    background: white;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    box-shadow: 0 0 20px 2px rgba(203, 185, 185, 0.1);
    position: relative;
}

.title {
    margin: 0 0 40px 0;
    color: black;
}

.el-button {
    height: 43px;
}

.forgot-password {
    text-align: right;
    margin-top: -20px;
    margin-bottom: 5px;
}

.register-row {
    justify-content: center;
    display: flex;
    margin-top: -10px;
}

/* 错误提示样式优化 */
.el-form-item__error {
    padding-top: 4px;
    font-size: 12px;
    color: #f56c6c;
}
</style>
